<include file="public@header_vue"/>
<style>
    .el-pagination {
        margin-top: 20px;
    }

    .avatar {
        width: 40px;
        height: auto;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
</style>
</head>
<body>
<div id="app">
    <el-tabs type="border-card">
        <el-tab-pane label="微信设置" v-loading="onDataLoading">
            <el-row>
                <el-form :model="sourceFrom" class="demo-form-inline" :rules="rules" ref="sourceFrom"
                         label-width="200px">
                    <el-form-item label="微信公众号appid" prop="appid">
                        <el-col :span="18">
                            <el-input v-model="sourceFrom.appid" placeholder="微信公众号appid"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="微信公众号secret" prop="secret">
                        <el-col :span="18">
                            <el-input v-model="sourceFrom.secret" placeholder="微信公众号secret"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="微信验证token" prop="token">
                        <el-col :span="18">
                            <el-input v-model="sourceFrom.token" placeholder="微信验证token"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="消息加解密方式" prop="type">
                        <el-col :span="18">
                            <el-radio-group v-model="sourceFrom.type">
                                <el-radio :label="0">明文模式</el-radio>
                                <el-radio :label="1">兼容模式</el-radio>
                                <el-radio :label="2">安全模式</el-radio>
                            </el-radio-group>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="EncodingAESKey">
                        <el-col :span="18">
                            <el-input v-model="sourceFrom.EncodingAESKey" placeholder="EncodingAESKey"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="服务器地址" prop="server_address">
                        <el-col :span="18">
                            <el-input v-model="sourceFrom.server_address"

                                      placeholder="服务器地址"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="商户id" prop="mch_id">
                        <el-col :span="18">
                            <el-input v-model="sourceFrom.mch_id" placeholder="商户id"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="api密钥" prop="key">
                        <el-col :span="18">
                            <el-input v-model="sourceFrom.key" placeholder="api密钥"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="cert_path" prop="cert_path">
                        <el-col :span="18">
                            <el-upload
                                    class="upload-demo"
                                    drag
                                    action="{:url('api/crm/upload')}"
                                    :on-success="handleFileSuccess"
                                    :data="params"
                            >
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                            <el-input v-model="sourceFrom.cert_path" placeholder="cert_path"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="key_path" prop="key_path">
                        <el-col :span="18">
                            <el-upload
                                    class="upload-demo"
                                    drag
                                    action="{:url('api/crm/upload')}"
                                    :on-success="handleKeyPathSuccess"
                                    :data="params"
                            >
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                            <el-input v-model="sourceFrom.key_path" placeholder="key_path"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="回调地址" prop="notify_url">
                        <el-col :span="18">
                            <el-input v-model="sourceFrom.notify_url" placeholder="回调地址"></el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
                <el-button v-if="sourceFrom.id === ''" type="primary" @click="submit('sourceFrom')">新增</el-button>
                <el-button v-else type="primary" @click="submit('sourceFrom')">修改</el-button>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="微信快捷授权" v-loading="onDataLoading">
            <el-row style="height: 900px;">
                <iframe :src="url" frameborder="0" width="100%" height="100%"></iframe>
            </el-row>
        </el-tab-pane>
    </el-tabs>
</div>
</body>
<script>
    let id = 1000;
    var app = new Vue({
        el: '#app',
        data: function () {

            var checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                } else {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号'));
                    }
                }
            };
            let self = this;
            return {
                tableData: [],
                form: {
                    keyword: '',
                },
                url: '',
                sourceFrom: {
                    id: '',
                    name: '',
                    tag_list: [],
                },
                params: {
                    filetype: 'file'
                },
                dialogVisible: false,
                dialogLoading: true,
                totalNum: 0,
                currentPage: 1,
                parent_info: [],
                show_name: {
                    label: 'name'
                },
                onDataLoading: false,
                headers: {'X-Requested-With': 'XMLHttpRequest'},
                rules: {
                    name: [{required: true, message: '请输入客户来源名称', trigger: 'blur'}],
                },
                company_id: 0,
            };

        },
        created() {
            this.getData()

        },
        methods: {
            clearForm() {
                this.form = {
                    name: '',
                }
            },
            init_setting() {
                let _this = this;
                let params = {company_id: _this.company_id};
                axios.get("{:url('api/crm/get_open_plat_form_url')}", {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    params: params
                }).then(function (response) {
                    console.log(response.data.data);
                    _this.onDataLoading = false;
                    if (response.data.code === 1) {
                        _this.url = response.data.data
                    } else {
                        _this.$message({
                            message: response.data.msg,
                            type: 'warning'
                        });
                    }
                }).catch(function (error) {
                    _this.onDataLoading = false;
                    _this.$message.error(error.toString())
                })
            },
            update(data) {
                let _this = this;
                console.log(data)
                if (data) {
                    _this.sourceFrom = JSON.parse(JSON.stringify(data));
                } else {
                    _this.sourceFrom = {
                        id: '',
                        name: '',
                        tag_list: [],
                    }
                }
                _this.dialogVisible = true;
                _this.dialogLoading = false;
            },
            handleFileSuccess(res, file) {
                console.log(res.url)
                this.sourceFrom.cert_path = res.url;
            },
            handleKeyPathSuccess(res, file) {
                console.log(res.url)
                this.sourceFrom.key_path = res.url;
            },
            submit(form) {
                let _this = this;
                _this.$refs[form].validate((valid) => {
                    if (valid) {
                        axios.post("{:url('admin/wechat/update_setting')}", this.sourceFrom, {
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest',
                            }
                        }).then(function (response) {
                            _this.dialogLoading = false;
                            if (response.data.code === 1) {
                                if (_this.sourceFrom.id === '') {
                                    _this.$message.success('新增完成');
                                } else {
                                    _this.$message.success('修改成功');
                                }
                                _this.getData();
                                _this.dialogVisible = false;
                            } else {
                                _this.$message.warning(response.data.msg);
                            }
                        }).catch(function (error) {
                            _this.dialogLoading = false;
                            _this.$message.error(error.toString())
                        })
                    } else {
                        _this.dialogLoading = false;
                        return false;
                    }
                });
            },

            //首页获取列表数据
            getData(page = 1) {
                let _this = this;
                let params = {page: page};
                this.onDataLoading = true;
                if (this.form.keyword !== '') {
                    params.keyword = this.form.keyword;
                }
                console.log(params);
                axios.get("{:url('admin/wechat/setting')}", {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    params: params
                }).then(function (response) {

                    _this.onDataLoading = false;
                    if (response.data.code === 1) {
                        if (response.data.data.content) {
                            _this.sourceFrom = response.data.data.content;
                            _this.sourceFrom.id = response.data.data.id;
                            _this.company_id = response.data.data.company_id;
                            _this.init_setting()
                            console.log(_this.company_id);
                        } else {
                            _this.sourceFrom = {};
                        }

                    } else {
                        _this.$message({
                            message: response.data.msg,
                            type: 'warning'
                        });
                    }
                }).catch(function (error) {
                    _this.onDataLoading = false;
                    _this.$message.error(error.toString())
                })
            },
            formatDate(timestamp) {
                let date = new Date(timestamp * 1000);
                return date.getFullYear() + '-' + this.prefix(date.getMonth() + 1) + '-' + this.prefix(date.getDate()) + ' ' + this.prefix(date.getHours()) + ':' + this.prefix(date.getMinutes()) + ':' + this.prefix(date.getSeconds());
            },
            prefix(num) {
                if (num < 10) {
                    return '0' + num;
                }
                return num;
            }
        }
    });
</script>
